<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody">
			<scroll-view id="scrollview" scroll-y :scroll-top="scrollTop" scroll-with-animation
			:style="{height:style.contentH+'px'}">
				<block v-for="(item, index) in list" :key="index">
					<chat-list :item="item"></chat-list>
				</block>
			</scroll-view>
			<!-- 输入框 -->
			<chat-input @submit="submit"></chat-input>
		</view>
	</gracePage>
</template>

<script>
import time from '../../common/time.js';
import ChatList from '../../components/chat-list/chat-list';
import ChatInput from '../../components/chat-input/chat-input'
var graceJS = require('@/Grace.JS/grace.js');
export default {
	data() {
		return {
			scrollTop:0,
			style:{
				contentH:0,
				itemH:0
			},
			text: '',
			list: []
		};
	},
	onReady() {
		this.style.contentH = graceJS.system().windowHeight - uni.upx2px(120);
		this.pageToBottom();
	},
	onLoad() {
		this.getData();
	},
	methods: {
		pageToBottom(){
			graceJS.selectAll('.chat-item', (res)=>{
				res.forEach((r)=>{
					this.style.itemH += r.height
				})
				
				if(this.style.itemH > this.style.contentH){
					this.scrollTop = this.style.itemH
				}
			});
		},
		getData() {
			let arr = [
				{
					isme: false,
					userpic: '../../static/demo/userpic/2.jpg',
					type: 'text',
					data: '终身学习，用好大脑',
					time: '1555146412'
				},
				{
					isme: true,
					userpic: '../../static/demo/userpic/8.jpg',
					type: 'img',
					data: '../../static/demo/banner1.jpg',
					time: '1555146414'
				}
			];
			for (let i = 0; i < arr.length; i++) {
				arr[i].gstime = time.gettime.getChatTime(arr[i].time, i > 0 ? arr[i - 1].time : 0);
			}
			this.list = arr
		},
		submit(data) {
			let now = graceJS.now()
			let obj = {
					isme: true,
					userpic: '../../static/demo/userpic/2.jpg',
					type: 'text',
					data: data,
					time: now,
					gstime: time.gettime.getChatTime(now,this.list[this.list.length - 1].time)
			}
			this.list.push(obj)
			this.pageToBottom();
		}
	},
	comments:{
		ChatList,
		ChatInput
	}
};
</script>

<style lang="stylus">
.search-input
	position fixed
	bottom 0
	left 0
	right 0
	height 120rpx
	padding 0 20rpx
	background #FFFFFF
	border-top 1rpx solid #EEEEEE
	.input
		height 50rpx
		padding 10rpx 20rpx
		line-height 50rpx
		font-size 28rpx
		background #F4F4F4
		border-radius 10rpx
	.icon
		font-size 46rpx
		padding 0 40rpx
</style>
